<template>
  <div>
    <div class="map-container">
      <div id="container" style="width: 100%; height: 600px"></div>
      <div
        class="cover"
        :style="{ 'background-image': `url(${assMap})` }"
      ></div>
    </div>
    <!-- <pre>{{ center }}</pre> -->
    <code>{{ bounds }}</code>
    <!-- 当前地图缩放比:{{ 当前地图缩放比 }} 模式：{{ _status }} -->
    <button type="button" @click="ajaxPoint()">ajaxPoint</button>
    <button type="button" @click="ajaxPolygon()">ajaxPolygon</button>
    <button type="button" @click="ajaxArea()">ajaxArea</button>
    <button type="button" @click="绘制点()">绘制点</button>
    <button type="button" @click="绘制区块()">绘制区块</button>
    <button type="button" @click="setMapStyle()">mapStyle</button>
  </div>
</template>

<script src="./map.js"></script>
<style lang="less" scoped>
.map-container {
  width: 100%;
  height: 600px;
  position: relative;
  .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    background-position: 50% 50%;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}
</style>
